<script lang="ts">
export default {
  name: 'CreateUser',
};
</script>

<script setup lang="ts">
import type { FormRule, SubmitContext } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';

import { createVenue } from '@/api/venue';
import { useTabHook } from '@/utils/tabs';

const FORM_RULES: Record<string, FormRule[]> = {
  venueName: [{ required: true, message: '请输入场馆名称', type: 'error' }],
  address: [{ required: true, message: '请输入场馆地址', type: 'error' }],
};

// TODO 快速生成数据
const INITIAL_DATA = {
  venueName: '石子山体育公园',
  address: '重庆市江北区狮子山体育公园',
  status: true,
  comment: '石子山体育公园环境优美，设施齐全，交通便利，是一个休闲运动的好地方。',
};

// TODO 后续打开
// const INITIAL_DATA = {
//   userName: '',
// };

const { handleRemoveCurrentTab } = useTabHook();

const formData = ref({ ...INITIAL_DATA });

const onSubmit = async (ctx: SubmitContext) => {
  if (ctx.validateResult === true) {
    const res = await createVenue({ ...formData.value });
    if (res) {
      await MessagePlugin.success('新建场馆成功');
      handleRemoveCurrentTab();
    } else {
      await MessagePlugin.error('新建场馆失败');
    }
  }
};

const onReset = async () => {
  await MessagePlugin.info('取消新建');
  handleRemoveCurrentTab();
};
</script>

<template>
  <t-form
    ref="form"
    class="base-form"
    :data="formData"
    :rules="FORM_RULES"
    label-align="right"
    :label-width="100"
    @reset="onReset"
    @submit="onSubmit"
  >
    <div class="form-basic-container">
      <div class="form-basic-item">
        <div class="form-basic-container-title">场馆基本信息</div>
        <t-row class="row-gap" :gutter="[32, 24]">
          <t-col :span="6">
            <t-form-item label-align="top" label="场馆名称" name="venueName">
              <t-input v-model="formData.venueName" placeholder="请输入场馆名称" />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label-align="top" label="场馆位置" name="address">
              <t-input v-model="formData.address" type="text" placeholder="请输入场馆地址" />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label-align="top" label="是否启用" name="status">
              <t-switch v-model="formData.status"></t-switch>
            </t-form-item>
          </t-col>
        </t-row>
        <div class="form-basic-container-title form-title-gap">其他信息</div>
        <t-form-item label-align="top" label="备注" name="comment">
          <t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注信息" />
        </t-form-item>
      </div>
    </div>

    <div class="form-submit-container">
      <div class="form-submit-sub">
        <div class="form-submit-left">
          <t-button theme="primary" class="form-submit-confirm" type="submit"> 保存</t-button>
          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消</t-button>
        </div>
      </div>
    </div>
  </t-form>
</template>

<style lang="less" scoped>
.form-basic-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--td-bg-color-container);
  border-radius: var(--td-radius-medium) var(--td-radius-medium) 0 0;
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl) 80px var(--td-comp-paddingLR-xxl);

  @media (max-width: @screen-sm-max) {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl) 80px var(--td-comp-paddingLR-xl);

    .form-basic-container-title {
      margin: 0 0 var(--td-comp-margin-xxxl) 0;
    }
  }

  .form-basic-item {
    width: 676px;

    .form-basic-container-title {
      font: var(--td-font-title-large);
      font-weight: 400;
      color: var(--td-text-color-primary);
      margin: var(--td-comp-margin-xxl) 0 var(--td-comp-margin-xl) 0;
    }

    .form-title-gap {
      margin: calc(var(--td-comp-margin-xxl) * 2) 0 var(--td-comp-margin-xl) 0;
    }
  }
}

.form-submit-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--td-comp-paddingLR-xl);
  padding-bottom: var(--td-comp-paddingLR-xl);
  background-color: var(--td-bg-color-secondarycontainer);
  border-bottom-left-radius: var(--td-radius-medium);
  border-bottom-right-radius: var(--td-radius-medium);
  border-top: 1px solid var(--td-component-stroke);

  .form-submit-sub {
    width: 676px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .form-submit-left {
      .form-submit-upload-span {
        font-size: 14px;
        line-height: 22px;
        color: var(--td-text-color-placeholder);
        padding-top: 8px;
        display: inline-block;
      }
    }
  }
}
</style>
